<template>
  <div id="app">
    <my-header>
      <button @click="show = !show">按钮</button>
    </my-header>
    <router-view />

    <my-mask v-model="show" position="left" :styles="{ width: '50%' }">
      <!-- v-model不是只有input才能用 v-model不管用在哪里都是：value 和 @input的简写-->
      <!-- position:是定位的位置 -->
      <!-- styles 是样式 -->
      <ul class="btn">
        <li
          :style="{ backgroundColor: $store.state.color }"
          @click="changeColor"
        >
          <!-- 改变按钮的背景颜色 -->
          切换主题
        </li>
        <li
          :style="{ backgroundColor: $store.state.color }"
          @click="$router.push('/about')"
        >
          编辑数据
        </li>
        <li :style="{ backgroundColor: $store.state.color }">导出数据</li>
      </ul>
      <!-- 弹框的内容 -->
    </my-mask>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
import myMask from "@/components/myMask.vue";
import myHeader from "@/components/myHeader.vue";
export default {
  data() {
    return {
      show: false,
    };
  },
  components: {
    myHeader,

    myMask,
  },
  methods: {
    ...mapMutations(["changeColor"]),
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.btn {
  li {
    width: 100px;
    height: 50px;
    margin: 20px;
    text-align: center;
    line-height: 50px;
    color: #fff;
  }
}
</style>
